import React, { useState, useEffect } from 'react'
function App() {
  const [ bannerList, setBannerList ] = useState([])
  const [ recommendList, setRecommendList ] = useState([])
  // 在函数式组件中没有声明周期钩子函数的概念
  // useEffect 相当于是 类组件中的 componentDidMount componentDidUpdate componentWillUnmount的合体
  // useEffect(() => {}, []) 相当于 componentDidMount --- 最常用的方式
  // useEffect(() => {} ) 相当于 componentDidMount componentDidUpdate的合体
  // useEffect(() => { // 相当于 componentDidMount componentDidUpdate componentWillUnmount的合体
  //   return () => {}
  // } )
  // useEffect(() => { // 相当于 componentDidMount componentWillUnmount的合体
  //   return () => {}
  // }, [] )

  useEffect(() => {
    fetch('http://121.89.205.189/api/banner/list')
      .then(res => res.json())
      .then(res => {
        console.log(res)
        setBannerList(res.data)
      })
    fetch('http://121.89.205.189/api/pro/recommendlist')
      .then(res => res.json())
      .then(res => {
        console.log(res)
        setRecommendList(res.data)
      })
  }, [])
  return (
    <div>
      {
          bannerList && bannerList.map(item => (
            <img src={ item.img } alt="" key = { item.bannerid }/>
          ))
        }
      {
          recommendList && recommendList.map(item => (
            <div key={item.proid}>
              { item.proname }
            </div>
          ))
        }
    </div>
  )
}

export default App
